<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/data-tables/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>
<!-- 客户群 -->

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="customer-group" class="cus_setgroup_statistics">
        <div class="header_wrapper">
            <div class="title">联系客户统计</div>
            <div class="text">
                <span>分组的新增客户数、聊天总数、已回复聊天占比</span>
                <span class="on_cus_group_list">查看客户群统计概况</span>
            </div>
        </div>
        <div class="number_card_wrapper">
            <div class="number_card_item">
                <span class="num">50</span>
                <span class="text">群聊总数</span>
            </div>
            <div class="number_card_item">
                <span class="num">100</span>
                <span class="text">今日新增群聊数</span>
            </div>
            <!-- <div class="number_card_item">
                <span class="num">200</span>
                <span class="text">今日聊天总数</span>
            </div> -->
        </div>

        <div class="table_wrapper">
            <div class="table_header" style="margin-top: 20px;">
                <div class="left_wrapper">
                    <span class="group_num">共7个分组</span>
                </div>
                <a href="javascript:;" class="right_wrapper" id="export_btn">导出列表</a>
            </div>
            <table class="layui-table group_table" style="table-layout:fixed">
                <thead>
                    <tr>
                        <th>组名</th>
                        <th>组成员</th>
                        <th>群聊总数</th>
                        <th>新增群聊数</th>
                        <th>有过消息的群聊数</th>
                        <th>发过消息的组成员数</th>
                        <th>群聊消息总数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>一组</td>
                        <td>5</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>二组</td>
                        <td>6</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>三组</td>
                        <td>5</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                </tbody>
            </table>
            <div class="paging_style" id="paging"></div>
        </div>

        <div class="trend_kpi_wrapper">
            <div id="group_trend_kpi"></div>
        </div>
    </div>

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/data-tables/jquery.dataTables.min.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <!-- chart图表 -->
    <script src="../../js/highcharts/highcharts.js"></script>
    <script src="../../js/highcharts/exporting.js"></script>
    <script src="../../js/highcharts/no-data-to-display.js"></script>
    <script>
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer

                // 表格分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                });

                // 查看客户群列表
                $(".on_cus_group_list").click(function () {
                    self.location.href = "contact-cusgroup-kpi.html?nav_index=1"
                })
            })

        });
        // group_trend_kpi 客户每日增长趋势
        var group_trend_kpi = Highcharts.chart('group_trend_kpi', {
            title: {
                text: '分组群聊消息趋势'
            },
//             colors: ['#FFCC99', '#336699', '#99CCCC', '#CC6600', '#003333', 
//    '#99CC33', '#CCCCCC', '#CCFF66', '#99CCFF', '#666699'],
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            subtitle: {
                text: ''
            },
            tooltip: {
                shared: true
            },
            xAxis: {
                categories: ['1-30', '1-31', '2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7']
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                }
            },
            series: [{
                name: '总数',
                data: [5, 2, 3, 4, 2, 5, 3, 2]
            },
            {
                name: '一组',
                data: [1, 1, 0, 0, 0, 0, 0, 0],
                color: '#c9c9c9'
            },
            {
                name: '二组',
                data: [2, 0, 1, 2, 1, 4, 1, 0],
                color: '#c9c9c9'
            },
            {
                name: '三组',
                data: [2, 1, 2, 2, 1, 5, 3, 2],
                color: '#c9c9c9'
            }]
        })

    </script>
</body>

</html>